/*************** 总容器 ***************/
.wrapper{
	width: 100%;
	height: 100%;
	background-color: #F5F5F5;
}
/*************** header ***************/
.wrapper header{
	width: 100%;
	height: 30vw; 
	background-color: #0097FF;
	display: flex;
	align-items: center;
	color: #fff;
	font-size: 4.8vw;
}
.wrapper header img{
	width: 16vw;
	height: 16vw; 
	border-radius: 8vw;
	margin-left: 5vw;
}
.wrapper header p{
	margin-left: 5vw;
	color: #fff;
	font-size: 5.6vw;
	font-weight: 700;
}

/*************** userinfo ***************/
.wrapper .userinfo{
	width: 100%;
}
.wrapper .userinfo li{
	width: 100%;
	height: 12vw;
	box-sizing: border-box;
	padding: 0 4vw;
	margin-top: 3.6vw;
	background-color: #fff;
	
	display: flex;
	justify-content: space-between;
	align-items: center;
	
	user-select: none;
	cursor: pointer;
}
.wrapper .userinfo li p{
	font-size: 4.2vw;
	color: #666;
}
.wrapper .userinfo li i{
	/*左右两边的图标样式一样*/
	font-size: 5vw;
	color: #0097FF;
	margin-right: 3vw;
}
/*************** footer ***************/
.wrapper .footer{
	width: 100%;
	height: 14vw;
	border-top: solid 1px #DDD;
	position: fixed;
	left: 0;
	bottom: 0;
	/*保证在最上层*/
	z-index: 1000; 
	background-color: #fff;
	
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.wrapper .footer li{
	/*li本身的尺寸完全由内容撑起*/
	user-select: none;
	cursor: pointer;
	color: #999;
	
	/*主轴方向设为column，然后每个子元素才能垂直水平都居中*/
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.wrapper .footer li i{
	font-size: 5vw;
}
.wrapper .footer li p{
	font-size: 2.8vw;
}